<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>商品详细信息</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <style>
        #tab1-con h3 {
            line-height: 30px;
        }
        #tab1-con p {
            line-height: 30px;
            padding-left: 30px;
        }
    </style>
</head>

<body>

    <div id="interpolation"></div>
    <section class="aui-grid" id="goods-ware">

    </section>
</body>
<script id="interpolationtmpl" type="text/x-dot-template">
    <div class="aui-row" style="padding:5px 20px">
        <img src="{{=fnSiteUrl(it.lists.thumb)}}" alt="" width="350px" height="350px">
        <div class="aui-col-xs-5" style="line-height:40px">
            <h3 style="color:red">距离活动结束还剩:</h3>
        </div>
        <div class="aui-col-xs-7" style="line-height:40px" id="time-last">

        </div>
        <input type="hidden" value="{{=it.lists.end_time}}" id="time-last-1" />
        <input type="hidden" value="" id="time-last-2" />
    </div>
    <div class="aui-row" style="padding:10px 20px">
        <div class="aui-col-xs-12" style="line-height:40px;white-space: nowrap;text-overflow:ellipsis;overflow:hidden;">
            {{=it.lists.title}}
        </div>
        <div class="aui-col-xs-12" style="line-height:30px">
            <p>要求：<span style="color:red">任意拍一件</span></p>
        </div>
        <div class="aui-col-xs-6" style="line-height:20px">
            <p>试用份数：剩余<span style="color:red">{{=it.lists.number}}</span>份</p>
            <p>申请人数：<span style="color:red">{{=it.lists.apply_people}}</span>份</p>
        </div>
        <div class="aui-col-xs-6" style="line-height:20px">
            <p>已关注：<span style="color:red">{{=it.lists.hits}}</span>人</p>
            <p>获得试用：<span style="color:red">{{=it.lists.passed_people}}</span>人</p>
        </div>
        <div class="aui-col-xs-12" style="line-height:50px;text-align:center;font-size:16px;">
            商家已存入总试用保证金{{=it.lists.goods_deposit}}元，请放心试用
        </div>
        <div class="aui-col-xs-12" style="line-height:50px;text-align:center;font-size:14px;">
            <p>完成试用可以得到：本金{{=it.lists.goods_price}}元+上图产品一份</p>
        </div>
        <div class="aui-col-xs-12" style="line-height:50px;">
            试用流程
        </div>
        <div class="aui-col-xs-12">
            <img src="./img/process.png" alt="">
        </div>
    </div>
    <!--tab-->
    <div class="aui-tab" id="tab">
        <div class="aui-tab-item aui-active" tapmode onclick="tabAddClick(this);" show="tab1-con1">申请规则</div>
        <div class="aui-tab-item" tapmode onclick="tabAddClick(this);" show="tab1-con2">宝贝介绍</div>
        <div class="aui-tab-item" tapmode onclick="tabAddClick(this);" show="tab1-con3">新手帮助</div>
        <div class="aui-tab-item" tapmode onclick="tabAddClick(this);" show="tab1-con4">已申请试客</div>
    </div>
    <div id="tab1-con">
        <div id="tab1-con1" style="padding:20px 20px">
            <ul>

                <p>不明白如何申请？入群交流：<span style="color:red">QQ:575697767</span></p>
                <li>

                    <h3>试用流程：</h3>
                    <p>1、申请试用，获得试用资格。</p>
                    <p>2、申请通过后，按照搜索流程提示，以<span style="color:red">{{=it.lists.goods_price}}元</span>去指定平台下单。</p>
                    <p>3、下单完成后，回填写购买付款的订单号。</p>
                    <p>4、等待收货 → 确认收货 → 给予宝贝评价，并填写试用报告。</p>
                    <p>5、报告通过 → 返还<span style="color:red">{{=it.lists.goods_price}}元</span>到您的账户中 → 试用完成。</p>
                </li>

                <li>

                    <h3 style="color:red">注意事项：</h3>
                    <p>1、与商家旺旺聊天时不要提及“试客”等信息，否则试用无效。</p>
                    <p>2、禁止使用信用卡，淘金币，优惠券，红包，天猫积分等。</p>
                    <p>3、禁止通过淘宝客，返利网，一淘等返利返现网链接下单。</p>
                    <p>4、非手机端活动，禁止使用手机端下单。</p>
                    <p>以上由于买家违规下单所产生的费用，有买家承担。平台有权冻结其账号，限制提现操作，IP列入黑名单。</p>

                </li>
                <li>

                    <h3 style="color:red">温馨提示：</h3>
                    <p>1、用户获得试用资格后，请根据时间提示按时提交订单号和试用报告。</p>
                    <p>2、若因未按时提交以上信息而被系统取消试用资格，将无法恢复资格。</p>
                    <p>3、若活动过程遇到问题请及时联系在线客服。</p>

                </li>
            </ul>


        </div>
        <div id="tab1-con2" class="aui-hide" style="height:600px">

            <h2 style="text-align:center;padding-top:2rem;">审核通过后才能看到活动详情</h2>

        </div>
        <div id="tab1-con3" class="aui-hide" style="padding:20px 20px">
            <ul>
                <li>
                    <h3><img src="./img/show/step1.png" alt="">注册账户，免费申请</h3>
                    <p>注册用户账户找到商品，点击“免费申请”按钮进入到申请页面。</p>

                    <img src="./img/show/1804241632328597.png" alt="">
                </li>
                <li>

                    <h3><img src="./img/show/step2.png" alt="">提交申请，等待审核</h3>
                    <p>完成申请任务等待开奖，每个活动有3次开奖机会，连续3天完成申请可获得高中奖机会。</p>

                    <img src="./img/show/180424163349335.png" alt="">
                </li>
                <li>

                    <h3><img src="./img/show/step3.png" alt="">审核通过后，下单付款</h3>
                    <p>中奖获得试用资格后，按照要求去淘宝/天猫购买商品，下单付款并提交订单号。 </p>

                    <img src="./img/show/1804241634385293.png" alt="">
                </li>
                <li>

                    <h3><img src="./img/show/step4.png" alt="">收到确认去淘宝评价</h3>
                    <p>收到商品后，在淘宝/天猫对应的订单确认收货并评价</p>

                    <img src="./img/show/1804241635254648.png" alt="">
                </li>
                <li>

                    <h3><img src="./img/show/step5.png" alt="">点击我已在淘宝评价</h3>
                    <p>淘宝评价后，到新试客点击”我已淘宝收货评价”。</p>
                    <img src="./img/show/1804241637125207.png" alt="">
                </li>
                <li>

                    <h3><img src="./img/show/step6.png" alt="">完成活动，返款到账</h3>
                    <p>报告通过后，系统即返款到新试客账户，可在用户中心点击“立即提现”按钮申请提现。</p>

                    <img src="./img/show/1804241637317620.png" alt="">
                </li>
            </ul>

        </div>
        <div id="tab1-con4" class="aui-hide" style="height:600px">
            <section class="aui-grid">
                <div class="aui-row">

                {{? it.lists.good_list }}
                    {{~it.lists.good_list:v1:k1}}
                    <div class="aui-col-xs-3" style="text-align:center">
                        <img src="{{= fnSiteUrl(v1.avatar)}}" alt="" style="padding:10px"  />
                        <div>{{= v1.nickname}}</div>
                    </div>
                    {{~}}
                {{?}}
                </div>
            </section>
        </div>
    </div>
</script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="./conf/config.js"></script>
<script type="text/javascript" src="./js/common.js"></script>
<script type="text/javascript" src="../script/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>

<script type="text/javascript">
    apiready = function() {
        //api.parseTapmode();
        fnGetWareInfo(api.pageParam.wareId);
        //fnGetGoodListUser(api.pageParam.wareId);
        initRefresh();
    };

    //时钟

    function clock() {
        var num = 1;
        if (num == 1) {
            var endTime1 = $("#time-last-1").val();
            var endTime = new Date(endTime1 * 1000);
            var nowTime = new Date();
            var second = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);
            var d = parseInt(second / 60 / 60 / 24); //计算剩余的天数
            var h = parseInt(second / 60 / 60 % 24); //计算剩余的小时
            var m = parseInt(second / 60 % 60); //计算剩余的分钟
            var s = parseInt(second % 60); //计算剩余的秒数
            var html = d + "天 " + h + "小时 " + m + "分钟 " + s + "秒";
            $("#time-last").html(html);
            $("#time-last-2").val(second);
            num = 2;
        } else {
            var second = $("#time-last-2").val();
            if (second > 0) {
                second--;
                var d = parseInt(second / 60 / 60 / 24); //计算剩余的天数
                var h = parseInt(second / 60 / 60 % 24); //计算剩余的小时
                var m = parseInt(second / 60 % 60); //计算剩余的分钟
                var s = parseInt(second % 60); //计算剩余的秒数
                var html = d + "天 " + h + "小时 " + m + "分钟 " + s + "秒";
                $("#time-last").html(html);
                $("#time-last-2").val(second);
            } else {
                clearInterval(dsq);
            }

        }


    }


    //tab切换
    function tabAddClick(that) {
        $(that).addClass("aui-active").siblings().removeClass("aui-active");
        var dom = $(that).attr("show");

        $("#" + dom).removeClass("aui-hide").siblings().addClass("aui-hide");

    }

    function fnGetWareInfo(goodId) {
        api.showProgress({
            title: '努力加载中...',
            text: '先喝杯茶...',
            modal: false
        });

        api.ajax({
            url: SITE_URL+'index.php?m=api&c=appnew&a=goods_show&goods_id=' + goodId+'&state=1',
            method: 'get',
        }, function(ret, err) {
          //alert(JSON.stringify(ret));
            if (ret) {
                fnUpdateWare(ret); //把数据渲染到模板上面
                var dsq = setInterval(clock, 1000);
                api.refreshHeaderLoadDone(); //下拉刷新隐藏
            } else {
                alert(JSON.stringify(err));
            }
        });
    }
    //分配数据到模板；
    function fnUpdateWare(ret) {
        //var dataInter = {"name":"Jake","age":31};
        var interText = doT.template($("#interpolationtmpl").text());
        $("#interpolation").html(interText(ret));
        api.hideProgress();
    }

    function initRefresh() {
        api.setRefreshHeaderInfo({
            visible: true,
            loadingImg: 'widget://image/refresh.png',
            bgColor: '#ccc',
            textColor: '#fff',
            textDown: '下拉刷新...',
            textUp: '松开刷新...',
            showTime: true
        }, function(ret, err) {
            fnGetWareInfo(api.pageParam.wareId);
        });
    }
    // function fnGetGoodListUser(goodId){
    //   api.ajax({
    //       url: SITE_URL+'index.php?m=api&c=appnew&a=good_user_list&goods_id='+ goodId+'&state=1',
    //       method: 'get',
    //   }, function(ret, err) {
    //       if (ret) {
    //           fnUpdateGoodUserList(ret); //把数据渲染到模板上面
    //       } else {
    //           alert(JSON.stringify(err));
    //       }
    //   });
    // }

</script>

</html>
